<script setup lang="ts">
import { computed } from "vue";

interface Props {
  modelValue?: string | number;
  placeholder?: string;
  label: string;
  border?: boolean;
}
const props = withDefaults(defineProps<Props>(), {
  border: false,
});
const emits = defineEmits(["update:modelValue"]);
const inputValue = computed({
  get() {
    return props.modelValue;
  },
  set(val) {
    emits("update:modelValue", val);
  },
});
</script>

<template>
  <div class="x-form-item">
    <span class="label"> {{ props.label }} </span>
    <div class="x-form-item-box">
      <slot>
        <uni-easyinput
          :inputBorder="props.border"
          style="font-size: 12px"
          class="x-form-item-input"
          type="text"
          v-model="inputValue"
          :placeholder="placeholder ? props.placeholder : '请输入' + props.label"
          v-bind="$attrs"
        />
      </slot>
    </div>

    <slot name="suffix"> </slot>
  </div>
</template>

<style lang="scss" scoped>
.x-form-item {
  display: flex;
  align-items: center;
  padding: 7px 0;
  .label {
    width: 60px;
    text-align: right;
    margin-right: 8px;
    font-size: 12px;
    color: #333;
  }
  &-box {
    flex: 1;
  }
}
</style>
